<template>
    <div class="headerimg">
        <el-header></el-header>
        <el-main>
        <p class="username">用户名:</p>
        <p class="password">密码:</p>
        <input type="text" class="userin">
        <input type="text" class="passin">
        <button @click="regtclick" class="regt">没有用户？点击这里注册</button>
        <button @click="forgetclick" class="forget">忘记密码？点击这里找回</button>
        <button @click="pasgclick" class="pasg">游客登录</button>
        <button @click="userclick" class="usr">用户登录</button>
        <button @click="adminclick" class="admin">管理员登录</button>
        </el-main>
    </div>
</template>

<script>
export default{
    methods:{
        regtclick(){
            this.$router.push('/Register')
        },
        pasgclick(){
            this.$router.push('/PasgPage')
        },
        userclick(){
            this.$router.push('/UserPage')
        },
        adminclick(){
            this.$router.push('/AdminPage')
        }
    }
}
</script>


<style scoped>
div{
    position: relative;
}

p{
    position: absolute;
    height: 26px;
    width: 288px;
    color: #FFD700;
    font-size: 28px;
}

input{
    border: #BEBEBE solid 1px;
    background-color: black;
    border-radius: 5px;
    color: 	#FFFFCE;
    font-size: 22px;
}

.headerimg {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    margin:-8px;
    position: fixed;
    background-image: url("../assets/7.jpg");
}

.username{
    left: 680px;
    top: 300px;
}

.password{
    left: 707px;
    top: 380px;
}

.userin{
    position: absolute;
    left: 780px;
    top: 335px;
}

.passin{
    position: absolute;
    left: 780px;
    top: 415px;
}

.regt{
    height: 26px;
    position: absolute;
    left: 1082px;
    top: 345px;
    background-color: black;
    color: #FF6347;
    border: 0;
    font-size: 15px;
    cursor: pointer;
}

.forget{
    height: 26px;
    position: absolute;
    left: 1082px;
    top: 425px;
    background-color: black;
    color: #FF6347;
    border: 0;
    font-size: 15px;
    cursor: pointer;
}

.password{
    position: absolute;
}

.pasg{
    position: absolute;
    left: 1110px;
    top: 550px;
    font-size: 36px;
    color: #fff;
    background-color: black;
    cursor: pointer;
    border: 0;
}

.usr{
    position: absolute;
    left: 870px;
    top: 550px;
    font-size: 36px;
    color: #fff;
    background-color: black;
    cursor: pointer;
    border: 0;
}

.admin{
    position: absolute;
    left: 598px;
    top: 550px;
    font-size: 36px;
    color: #fff;
    background-color: black;
    cursor: pointer;
    border: 0;
}

</style>